<template>
	<div class="layout-padding">
		<HyTable
			:searchFields="searchFields"
			:tableConfig="tableConfig"
			:searchConfig="searchConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:searchButtonConfig="{
				span: 4,
				offset: 1,
			}"
			:searchDefault="searchDefault"
			:searchData="searchData"
			:type="tabs"
			:tabls="tabls"
			@handleClick="handleClick"
		>
			<template #tableHeader>
				<el-button type="primary" @click="addTb" icon="Plus">新增填报数据</el-button>
			</template>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.status)">{{ chengStatu(row.status) }}</el-tag>
			</template>
			<template #leadDeptSlot="{ row }">
				<el-button v-if="row.processInstanceId && ['2', '3', '4'].indexOf(row.status) != -1" text type="primary" @click="showLead(row)"
					>查看</el-button
				>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-between">
							<el-button text type="primary" style="margin-top: -5px" @click="showDetails(row)">查看</el-button>
							<div class="moreBot" v-if="canCancel(row)">
								<el-dropdown style="color: var(--el-color-primary)">
									<span class="el-dropdown-link">
										更多<el-icon class="el-icon--right"><arrow-down color="var(--el-color-primary)" /></el-icon>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item
												style="color: var(--el-color-primary)"
												:icon="Document"
												v-if="['1'].indexOf(row.status) != -1"
												@click="showDetails(row)"
												>申报</el-dropdown-item
											>
											<el-dropdown-item style="color: #52c41a" :icon="Edit" v-if="['1', '4'].indexOf(row.status) != -1" @click="toEdit(row)"
												>编辑</el-dropdown-item
											>
											<el-dropdown-item v-if="['1'].indexOf(row.status) != -1" style="color: #f74e56" :icon="Delete" @click="del(row.id)"
												>删除</el-dropdown-item
											>
											<el-dropdown-item
												v-if="['2'].indexOf(row.status) != -1"
												style="color: #f5222d"
												:icon="Reading"
												@click="withdraw(row.processInstanceId)"
												>撤销</el-dropdown-item
											>
											<el-dropdown-item
												v-if="['3'].indexOf(row.status) != -1"
												style="color: var(--el-color-primary)"
												:icon="Document"
												@click="toApplication(row, 1)"
												>填写中后期资料</el-dropdown-item
											>
											<el-dropdown-item
												v-if="
													['3'].indexOf(row.status) != -1 && ['1', '4'].indexOf(row.logStatus) != -1 && row.checkFlag == '0' && row.changeFlag != '1'
												"
												style="color: #52c41a"
												:icon="Edit"
												@click="toApplication(row, 2)"
												>应用变更</el-dropdown-item
											>
											<el-dropdown-item
												v-if="
													['3'].indexOf(row.status) != -1 && ['1', '4'].indexOf(row.logStatus) != -1 && row.checkFlag == '0' && row.changeFlag != '1'
												"
												style="color: #f74e56"
												:icon="Delete"
												@click="toApplication(row, 3)"
												>应用终止</el-dropdown-item
											>
											<el-dropdown-item
												v-if="row.checkFlag == '0' && ['3'].indexOf(row.status) != -1 && row.changeFlag != '1'"
												style="color: #38a9ef"
												:icon="FolderChecked"
												@click="toApplication(row, 4)"
												>应用验收</el-dropdown-item
											>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
		<!-- 新增填报数据 -->

		<el-dialog
			v-model="addDat.dialogTableVisible"
			:title="tabNum == 1 ? '选择方案中的开发项目' : '选择方案中的运维项目'"
			width="800"
			:lock-scroll="false"
		>
			<div class="seach">
				<div></div>
				<div class="seach_r">
					<div>应用名称</div>
					<div class="input">
						<el-input v-model="addfroms.name" />
					</div>
					<div>
						<el-button type="primary" :icon="Search" @click="addSub"> 查询 </el-button>
						<el-button icon="RefreshLeft" @click="addRess"> 重置 </el-button>
					</div>
				</div>
			</div>
			<div class="table">
				<!-- @select="handleCurrentChange"
					@selection-change="handleSelectionChange" 多选实现单选 -->
				<el-table ref="currentRowRef" v-loading="addDat.addlonding" @row-click="clickRow" :data="addDat.addTable" style="width: 100%">
					<!-- <el-table-column type="selection" :selectable="isColse" width="55" /> -->
					<el-table-column type="selection" width="55">
						<template #default="scope">
							<el-radio v-model="radio" :label="scope.$index" @change="handleRadioChange(scope.$index, scope.row)"></el-radio>
						</template>
					</el-table-column>
					<el-table-column label="序号" type="index" width="55" />
					<el-table-column prop="appName" label="数字化应用名称"> </el-table-column>
					<el-table-column prop="appCode" property="数字化应用编号" label="数字化应用编号" />
					<el-table-column prop="declareTime" label="填报时间" />
				</el-table>
			</div>
			<div>
				<el-pagination
					v-model:current-page="addfroms.current"
					:page-size="[10]"
					layout="total, sizes,prev, pager, next,jumper"
					:total="addfroms.total"
					@current-change="currentChange"
					@size-change="sizeChange"
				/>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="addDat.dialogTableVisible = false">取消</el-button>
					<el-button type="primary" @click="addSure"> 确认添加 </el-button>
				</div>
			</template>
		</el-dialog>
		<leadDept ref="showLeadRef" :processInstanceId="processInstanceId" />
	</div>
</template>

<script lang="ts" setup>
import { ArrowDown, Document, Edit, Delete, Reading, FolderChecked, Search } from '@element-plus/icons-vue';
import { appImplementationPage, removeImplementation } from '/@/api/Implementation/addImple';
import { useDict } from '/@/hooks/dict';
const { implement_business_type } = useDict('implement_business_type');
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { declarePage } from '/@/api/digitalList/digitalLization';
import HyTable from '/@/components/HyTable/components/TableLayout/tabLayout.vue';
import leadDept from '../detail/components/leadDept.vue';
import { cancel } from '@cqdcg/admin/views/flow/task/cancel';
const router = useRouter();
const hyTableRef = ref();
const tabs = ref('tabs');
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '开发项目',
				name: 1,
			},
			{
				lable: '运维项目',
				name: 2,
			},
		],
	};
});
const tabNum = ref(1); //默认请求tab值
const searchDefault = ref({
	type: 1,
});
const searchData = ref({
	type: tabNum.value,
});
//接收tab值调用接口
const handleClick = (tab: any) => {
	tabNum.value = tab;
	searchDefault.value.type = tab;
	hyTableRef.value.handleRest();
};
const getTableData = () => {
	hyTableRef.value.getTableData();
};
const tableColumns = computed(() => {
	return [
		{ prop: 'appCode', label: '数字化应用编号', width: 260 },
		{ prop: 'appName', label: '数字化应用名称', width: 260 },
		{ prop: 'domain', label: '所属领域', width: 150 },
		{ prop: 'responsibleDept', label: '责任部门', width: 200 },
		{ prop: 'declareTime', label: '提交时间' },
		{ prop: 'leadDept', label: '审核部门/人员', slot: 'leadDeptSlot', width: 140 },
		{ prop: 'status', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' },
	];
});
const searchConfig = ref({
	labelWidth: '100px',
	span: 4,
	offset: 0,
	type: 'search',
	title: '数字化应用实施申报',
	show: true,
});
const tableConfig = computed(() => {
	return {
		request: appImplementationPage,
	};
});
const chengStatu = (statu: any) => {
	if (!statu) {
		return;
	}
	let rea = '';
	implement_business_type.value.forEach((item: any) => {
		if (item.value == statu) {
			rea = item.label;
		}
	});
	return rea;
};
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'start-tag';
		case '2':
			return 'wait-tag';
		case '3':
			return 'agree-tag';
		case '4':
			return 'refuse-tag';
		default:
			break;
	}
};
//不能撤销不显示更多
const canCancel = (row: any) => {
	if (row.status == 2 && row.canCancel == false) {
		return false;
	} else {
		return true;
	}
};
// 配置搜索
const searchFields = computed(() => {
	return {
		name: {
			type: 'input',
			span: 4,
			label: '关键字',
		},
		status: {
			type: 'select',
			label: '状态',
			span: 4,
			options: implement_business_type.value,
		},
		timeArr: {
			type: 'date',
			span: 4,
			picker: 'datetimerange',
			label: '提交时间',
		},
	};
});

//查看
//详情
const detail = ref('实施方案申报');
const showDetails = (row: any) => {
	let canCancel: any = null; //判断是否能够撤销传递给详情页
	if (row.status == 2 && row.canCancel == false) {
		canCancel = false;
	} else {
		canCancel = true;
	}
	router.push({
		path: '/digitalImplement/detail/revDetail',
		query: {
			id: row.id,
			appCode: row.appCode,
			logStatus: row.logStatus,
			instanceId: row.instanceId,
			title: detail.value,
			status: row.status,
			processInstanceId: row.processInstanceId,
			pageTap: 'impDec',
			changeFlag: row.changeFlag,
			canCancel: canCancel,
		},
	});
};
//申报等信息
const toApplication = (row: any, type: any) => {
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: row.id,
			appCode: row.appCode,
			instanceId: row.instanceId,
			title: '实施填报',
			type: type,
			tableType: tabNum.value,
			processInstanceId: row.processInstanceId,
		},
	});
};
//撤销
const withdraw = (instanceId: any) => {
	let data = {
		processInstanceId: instanceId,
	};
	cancel(data)
		.then((res: any) => {
			getTableData();
		})
		.catch((err: any) => {
			console.log('取消弹框和失败回调');
		});
};
//删除
const del = (id: any) => {
	let data = { id, type: '1' };
	ElMessageBox.confirm('是否确定此条信息?', '', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		center: true,
	})
		.then(() => {
			removeImplementation(data).then((res) => {
				if (res.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
					getTableData();
				}
			});
		})
		.catch(() => {});
};
//去编辑
const toEdit = (row: any) => {
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: row.id,
			appCode: row.appCode,
			instanceId: row.instanceId,
			title: '实施填报',
			type: 0,
			tableType: tabNum.value, //表格标识
		},
	});
};

//新增填报数据相关================
const addTb = () => {
	addDat.value.dialogTableVisible = true;
	getAddTableData();
};
const addDat = ref({
	dialogTableVisible: false,
	addTable: [],
	//加载
	addlonding: false,
});
const addfroms = ref({
	total: 0,
	current: 1,
	size: 10,
	records: '',
	name: '',
	status: '4',
	type: tabNum.value,
	startTime: '',
	endTime: '',
	imStatus: 0, //已经选择了的数据隐藏
});
const currentChange = (current: number) => {
	addfroms.value.current = current;
	getAddTableData();
};

// 每页数量
const sizeChange = (size: number) => {
	addfroms.value.size = size;
	getAddTableData();
};
//获取添加数据
const getAddTableData = () => {
	addDat.value.addlonding = true;
	addfroms.value.type = tabNum.value;
	let data = addfroms.value;
	declarePage(data)
		.then((res) => {
			if (res.code == 0) {
				addfroms.value.total = res.data.total;
				addDat.value.addTable = res.data.records;
				addDat.value.addlonding = false;
			}
		})
		.catch((res) => {
			addDat.value.addlonding = false;
		});
};
const addSub = () => {
	getAddTableData();
};
const addRess = () => {
	addfroms.value = {
		total: 0,
		current: 1,
		size: 10,
		records: '',
		name: '',
		status: '4',
		type: tabNum.value,
		startTime: '',
		endTime: '',
		imStatus: 0, //已经选择了的数据隐藏
	};
	getAddTableData();
};
const currentRowRef = ref();
const currentRow = ref();
// 获取选中当前行数据
const handleSelectionChange = (checked: any) => {
	currentRow.value = checked[0];
};
const handleCurrentChange = (selection: any, row: any) => {
	if (selection.length > 1) {
		let del_row = selection.shift();
		currentRowRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
	}
};
const addSure = () => {
	if (!currentRow.value) {
		ElMessage({
			message: '请选择一条数据',
			type: 'warning',
		});
		return;
	}
	let declareId = currentRow.value.declareId;
	// console.log(currentRow.value, 132);
	let title = '实施填报';
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			declareId,
			title,
			//步骤标识
			type: 0,
			tableType: tabNum.value,
		},
	});
};

//实现单选
const radio: any = ref(null);
/**选择行数据 */
function clickRow(row: any, column: any, event: any) {
	currentRow.value = row;
}
function handleRadioChange(index: any, row: any) {
	radio.value = index;
	currentRow.value = row;
}

//查看人员
const processInstanceId: any = ref('');
const showLeadRef: any = ref();
const showLead = (row: any) => {
	processInstanceId.value = row.processInstanceId;
	showLeadRef.value.dialogVisible = true;
};
</script>
<style scoped lang="scss">
.layout-padding {
	overflow: auto;
	:deep(.el-tabs--border-card > .el-tabs__content) {
		padding: 0px;
	}

	.seach {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		.seach_r {
			display: flex;
			align-items: center;
			.input {
				display: flex;
				margin-right: 10px;
				margin-left: 5px;
			}
		}
	}
	.table {
		width: 100%;
		:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
			visibility: hidden;
		}
	}
}

.moreBot {
	:deep(.block-col-2 .demonstration) {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}

	:deep(.block-col-2 .el-dropdown-link) {
		display: flex;
		align-items: center;
	}
}

:deep(.el-radio__label) {
	display: none;
}
</style>
